<template lang="">
	<div class="homeinfo-warp">
		<!-- 图片 -->
		<div class="pic">
			<img
				src="https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E6%9F%A5%E7%9C%8B%E6%88%BF%E6%BA%90%E8%AF%A6%E6%83%85/u2631.png"
				alt=""
			/>
		</div>
		<!-- 介绍 -->
		<div class="introduce">
			<div class="title">
				<div class="title-avatar">
					<span>珠海市·整套公寓</span>
					<span>精装高层电梯8楼/市中心/金鸡西路 </span>
				</div>
				<div class="avatar">
					<img
						src="https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E8%81%8A%E5%A4%A9/u761.svg"
						alt=""
					/>
				</div>
			</div>

			<div class="tip">
				<span>4.8分</span>
				<span>近公交站</span>
				<span>可以做饭</span>
				<span>可以停车</span>
				<span>提供早餐</span>
			</div>
		</div>
		<!-- 详情 -->
		<div class="detail">
			<div class="detail-item">
				<span>详情</span>
				<span
					>这是一套在珠海中心的整套小屋，白色的设计，周边
					生活配套齐全，全天候服务......
				</span>
				<div class="intro">
					<div class="intro-item">
						<img
							src="https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E6%88%BF%E5%B1%8B%E8%AF%A6%E6%83%85/u935.svg"
							alt=""
						/>
						<span>4位房客</span>
					</div>
					<div class="intro-item">
						<img
							src="https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E6%88%BF%E5%B1%8B%E8%AF%A6%E6%83%85/u937.svg"
							alt=""
						/>
						<span>4位房客</span>
					</div>
					<div class="intro-item">
						<img
							src="https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E6%88%BF%E5%B1%8B%E8%AF%A6%E6%83%85/u939.svg"
							alt=""
						/>
						<span>4位房客</span>
					</div>
					<div class="intro-item">
						<img
							src="https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E6%88%BF%E5%B1%8B%E8%AF%A6%E6%83%85/u941.svg"
							alt=""
						/>
						<span>4位房客</span>
					</div>
				</div>
			</div>
		</div>
		<!-- 地点 -->
		<div class="location">
			<div class="location-item">
				<span>地点</span>
				<span>珠海市，广东省，中国</span>
				<span>中国广东省珠海市香洲区前山街道金鸡西路000号</span>
				<span>出行</span>
				<span
					><img
						src="https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E6%88%BF%E5%B1%8B%E8%AF%A6%E6%83%85/u947.png"
						alt=""
				/></span>
				<span>
					<i class="iconfont icon-liaotian"></i>
					<span> 准确位置将在预定后提供 </span>
				</span>
			</div>
		</div>

		<!-- 价格 -->
		<div class="price">
			<span>价格明细:</span>
			<span>￥1200/晚</span>
		</div>
		<!-- 操作 -->
		<div class="operate">
			<button @click="chat">与房东沟通</button>
			<button @click="predetermine">立即预定</button>
		</div>
	</div>
</template>
<script>

export default {
	name: 'checkhomeinfo',

	methods: {
		chat() {
			//与房东聊天,跳转聊天
		},
		predetermine() {
			
			////立即预定,跳转预定界面
		},
	},

};
</script>
<style lang="scss" scoped>
.homeinfo-warp {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-color: #fbfbfb;
	.pic {
		width: 100%;
		img {
			width: 100%;
		}
	}
	/* 介绍 */
	.introduce {
		display: flex;
		flex-direction: column;
		align-items: center;
		.title {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			padding: 20px;
			.title-avatar {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				padding-right: 20px;
				span:nth-child(1) {
					font-size: 14px;
					flex-wrap: 700;
					padding-bottom: 10px;
				}
				span:nth-child(2) {
					font-size: 18px;
					flex-wrap: 700;
				}
			}
			.avatar {
				width: 50px;
				height: 50px;
				background-color: #fff;
				border-radius: 50%;
				img {
					width: 100%;
					height: 100%;
				}
			}
		}
		.tip {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: space-between;
			width: 90%;
			padding: 0px 20px;
			span {
				width: 80px;
				height: 30px;
				background-color: #e4e4e4;
				color: #333;
				font-size: 14px;
				border-radius: 5px;
				text-align: center;
				line-height: 30px;
				margin-top: 10px;
			}
		}
	}
	/* 详情 */
	.detail {
		width: 90%;
		margin: auto;
		padding: 20px;
		.detail-item {
			display: flex;
			flex-direction: column;
			padding: 10px;
			border: 1px solid #333;
			box-shadow: 5px 5px 5px rgba(201, 201, 201, 0.35);
			border-radius: 5px;
			span:nth-child(1) {
				font-size: 18px;
				font-weight: 700;
			}
			span:nth-child(2) {
				padding-top: 20px;
				font-size: 14px;
				font-weight: 400;
			}
		}
		.intro {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			.intro-item {
				padding: 20px 0px 0px 0px;
				width: 50%;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-evenly;
				img {
					width: 35px;
					height: 35px;
				}
				span {
					padding: 0;
					font-size: 14px;
					color: #333;
				}
			}
		}
	}
	/* 地址 */
	.location {
		width: 90%;
		margin: auto;

		.location-item {
			display: flex;
			flex-direction: column;
			border: 1px solid #333;
			box-shadow: 5px 5px 5px rgba(201, 201, 201, 0.35);
			border-radius: 5px;
			span:nth-child(1) {
				font-size: 18px;
				font-weight: 700;
				padding: 10px;
			}
			span:nth-child(2) {
				font-size: 14px;
				font-weight: 700;
				padding: 10px;
			}
			span:nth-child(3) {
				font-size: 14px;
				font-weight: 400;
				padding: 10px;
				/* 文本添加下划线 */
				text-decoration: underline;
			}
			span:nth-child(4) {
				font-size: 14px;
				font-weight: 700;
				padding: 10px;
			}
			span:nth-child(5) {
				width: 90%;
				margin: auto;
				padding: 10px;
				img {
					width: 100%;
				}
			}
			span:nth-child(6) {
				padding: 10px;
				font-size: 14px;
				i {
					width: 20px;
					height: 20px;
				}
				span {
					font-weight: 400;
				}
			}
		}
	}
	/* 价格 */
	.price {
		width: 90%;
		padding: 10px 20px;
		display: flex;
		flex-direction: row;
		align-items: center;
		span:nth-child(1) {
			font-size: 14px;
			font-weight: 700;
		}
		span:nth-child(2) {
			font-size: 20px;
			font-weight: 700;
			color: #ff9933;
			padding: 0px 20px;
		}
	}
	/* 按钮 */
	.operate {
		width: 90%;
		padding: 30px 10px;
		margin: auto;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		button {
			background-color: #cc6666;
			font-size: 13px;
			width: 100px;
			height: 35px;
			border: none;
			border-radius: 10px;
			color: #fff;
		}
	}
}
</style>
